<template>
  <div id="gameQuery">
    <div class="backBtn fz_bold fz_28"> <span @click.stop="navitorBack"><i class="el-icon-arrow-left c_00"></i> 返回</span></div>
    <h1 class="title fz_64">查询游戏信息</h1>
    <!-- 搜索框 -->
    <div class="search-bar">
      <el-input placeholder="请输入完整的游戏码或手机号" v-model="keyWord" class="input-with-select">
        <el-button slot="append" icon="el-icon-search" @click="throttle(sendSearch)"></el-button>
      </el-input>
      <p class="tips" v-if="tips">{{tips}}</p>
    </div>
    <!-- 游戏查询结果 -->
    <div class="search-result">
      <div class="search-list" v-if="searchResult.length">
        <ul class="list">
          <li class="list-item" v-for="item in searchResult">
            <p>
              <span class="label">游戏码：</span>
              <strong class="txt">{{ item.accessCode }}</strong>
            </p>
            <p>
              <span class="label">游戏难度：</span>
              <span class="txt">{{ activityFlag[item.activityFlag] }}</span>
            </p>
            <p>
              <span class="label">剩余游戏时间：</span>
              <span class="txt">{{ getGameRemainTime(item.beginTime,item.activityTime)}}</span>
            </p>
            <p>
              <span class="label">游戏参加人数：</span>
              <span class="txt">{{ item.playerNum }}人</span>
            </p>
            <!-- 排名列表 -->
            <div class="rank-wrap">
              <p class="r-title">游戏排名：</p>
              <table class="rank-table">
                <thead>
                  <th class="center">排名</th>
                  <th>用户名</th>
                  <th>找到展品数</th>
                </thead>
                <tbody v-if="item.aActivityRankDos.length">
                  <tr v-for="v in item.aActivityRankDos">
                    <td class="center">{{ v.num }}</td>
                    <td>{{ v.customerName }}</td>
                    <td>{{ v.findNum }}件</td>
                  </tr>
                </tbody>
                <tbody class="emtpy-tbody" v-else>
                  <tr>
                    <td colspan="3">暂无排名数据</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </li>
        </ul>
      </div>
      <div class="search-empty" v-else>
        <p class="tips">暂无数据</p>
      </div>
    </div>
    <div class="backHome t_c" v-show="isOriginHei">
      <span class="bc_16 fz_36 fz_bold c_ff t_c" @click.stop="backHome">返回首页</span>
    </div>
  </div>
</template>

<script>
  require("./flexible.js");
  import ApiClient from '@/utils/ApiClient'
  import oMixin from '@/mixins'

  export default {
    name: "gameQuery",
    mixins: [oMixin],
    data() {
      return {
        keyWord: "",
        tips: "",
        activityFlag: ["简单", "普通", "困难"],
        searchResult: [
          /*{
            accessCode: "B83LQ5",
            activityFlag: 0,
            beginTime: 0, // 开始时间
            activityTime: 0, // 持续时间
            playerNum: 5
            aActivityRankDos: []
          },
          {
            accessCode: "B83LQ5",
            activityFlag: 0,
            beginTime: 0, // 开始时间
            activityTime: 0, // 持续时间
            playerNum: 5
            aActivityRankDos: []
          }*/
        ]
      }
    },
    methods: {
      throttle(fn,duration=320) {
        let self = this;
        let argu = [...arguments].slice(2);
        clearTimeout(fn.timer);
        fn.timer = setTimeout(() => {
          fn.apply(self,argu)
        }, duration)
      },

      navitorBack(){
        this.$router.back()
      },

      backHome() {
        this.$router.push({path: 'gameHome'});
      },

      sendSearch() {
        let keywords = this.keyWord.trim();
        if(keywords.length < 6){
          this.tips = "请输入完整的游戏码或手机号";
          return false;
        }
        this.tips = "";
        ApiClient.get(`/app/activity/${keywords}/findGame.do`).then((res) => {
          this.searchResult = res;
          console.log(res);
        });
      },

      getGameRemainTime(bTime,totalTime) {
        if(bTime === null)return "未开始";
        let now = new Date(),
            Y = now.getFullYear(),
            M = now.getMonth(),
            D = now.getDate();
        let bTimeArr = bTime.split(':');
        let bTimeStamp = new Date(Y,M,D,...bTimeArr).getTime();
        let remainTime = Math.round(totalTime - ( now.getTime() - bTimeStamp) / 60000);
        return remainTime > 0 ? remainTime + "分钟" : "已结束"
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "./base.css";
  $gap: .3rem;
  #gameQuery{
    padding-bottom: 1.5rem;
  }
  .backBtn{
    width: 100%;
    height: 0.7rem;
    display: flex;
    align-items: center;
    padding-left: 0.1rem;

    span{
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding-right: 0.5rem;
    }
  }
  .title{
    margin: 0;
    height: 1.2rem;
    line-height: 1.2rem;
    text-align: center;
  }

  .search-bar,
  .search-result{
    /*margin: 0 auto;
    width: 90%;*/
    padding: 0 .3rem;
  }

  .search-bar{
    margin-bottom: .4rem;
    .el-input{
      font-size: .28rem;
    }
    .tips{
      margin: .5em 0;
      font-size: .24rem;
      color: #f00;
    }
  }

  .search-list{
    font-size: .28rem;
    .list{
      margin: 0;
      padding: 0;
    }
    .list-item{
      overflow: hidden;
      padding: .2rem 0;
      margin-bottom: 1rem;
      p{
        padding: .5em 0;
        margin: 0;
        &:nth-child(even){
          background: #f9f9f9;
        }
      }
    }
    .txt{
      float: right;
    }
    strong.txt{
      color: #169BD5;
    }
  }

  .rank-wrap{
    font-size: .28rem;
    .r-title{
      margin: 0 0 .2rem;
    }
  }
  .rank-table{
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    th,
    td{
      padding: .5em;
      border-bottom: 1px dashed #ccc;
    }
    tr:nth-child(even){
      background: #f9f9f9;
    }
    .center{
      text-align: center;
    }

    thead{
      th:nth-child(1){
        width: 4em;
      }
    }

    .emtpy-tbody{
      td{
        text-align: center;
        color: #999;
      }
    }
  }

  .search-empty{
    padding: 1rem 0;
    height: 3rem;
    .tips{
      font-size: .4rem;
      text-align: center;
      color: #999;
    }
  }

  .backHome{
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: .1rem 0;
    background: rgba(255,255,255,.85);
    span {
      height: 1rem;
      width: 90%;
      border-radius:0.1rem
    }
  }
</style>
<style lang="scss">
  #gameQuery{
    .el-input__inner{
     /* height: .6rem;
      line-height: .6rem;*/
      padding: 0 .5em;
    }

    .el-input-group__append{
      .el-icon-search{
        font-size: .4rem;
      }
    }

    .el-input__inner:focus{
      border-color: #169BD5;
    }
  }
</style>
